<template>
  <div class="container">
    <div class="weui_cells_title">就诊卡：</div>
    <div class="weui_cells weui_cells_access" style="margin-top:10px;">
      <a @click="selectCard" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{order.cardName}} <span style="margin-left:15px;" class="blue_tag">{{order.cardType}}</span></p>
          <p>{{order.cardNum}}</p>
        </div>
        <div class="weui_cell_ft">
          选就诊卡
        </div>
      </a>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div v-show="!showEmpty">
      <div class="weui_cells weui_cells_checkbox">
        <div v-for="bill in bills">
          <label class="weui_cell weui_check_label">
            <div class="weui_cell_bd weui_cell_primary">
              <p>流&nbsp;&nbsp;水&nbsp;&nbsp;号：<span class="am-ft-sm am-ft-blue">{{bill.flowNo}}</span></p>
              <p>处方ID：<span class="am-ft-sm am-ft-blue">{{bill.recipeId}}</span></p>
              <p>开单科室：<span class="am-ft-sm am-ft-blue">{{bill.deptName}}</span></p>
              <p>开单医生：<span class="am-ft-sm am-ft-blue">{{bill.docName}}</span></p>
              <p>就诊时间：<span class="am-ft-sm am-ft-blue">{{bill.cureDate}}</span></p>
              <p>费用类别：<span class="am-ft-sm am-ft-blue">{{bill.payType}}</span></p>
              <p>处方类型：<span class="am-ft-sm am-ft-blue">{{bill.recipeType}}</span></p>
              <p>总&nbsp;&nbsp;费&nbsp;&nbsp;用：<span class="orange_tag">{{bill.totalAmt}}</span> <span class="am-ft-sm am-ft-blue">元</span></p>
              <p>金额只作参考，以实际结算为准。</p>
            </div>
            <div class="weui_cell_hd">
              <input type="checkbox" class="weui_check" name="ckbClinRecipt" value="{{bill.recipeId}}" checked="checked">
              <i class="weui_icon_checked"></i>
            </div>
          </label>
          <div class="weui_cell_bd weui_cell_primary">
            <a @click="showBillDetail($index)" href="javascript:;" style="margin:2px 10px;" class="weui_btn weui_btn_mini weui_btn_default">查看处方单明细</a>
          </div>
        </div>
      </div>
      <div class="weui_cells weui_cells_checkbox">
        <label class="weui_cell weui_check_label">
          <div class="weui_cell_bd weui_cell_primary">
            <p>全选 / 全不选</p>
          </div>
          <div class="weui_cell_hd">
            <input type="checkbox" class="weui_check" name="ckbSelectALL" value="全选" id="ckbSelectALL" checked="checked">
            <i class="weui_icon_checked"></i>
          </div>
        </label>
      </div>
      <a @click="goBill" href="javascript:;" style="margin:5px 8px;" class="weui_btn weui_btn_primary">去缴费</a>
    </div>
    <div>
      <p style="padding:10px;" class="am-ft-sm am-ft-gray">
        <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 社保病人微信缴费前需要到护士站进行身份确认。
      </p>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
  <div class="weui_dialog_alert" v-show="isShowBillDetail" @touchmove="false && $event.preventDefault()">
    <div class="weui_mask"></div>
    <div class="weui_dialog" style="height:80%;">
      <div class="weui_dialog_hd">
        <strong class="weui_dialog_title">处方单明细</strong>
      </div>
      <div id="scroll-wrapper" class="scroll-wrapper">
        <div class="scroller">
          <div class="weui_dialog_bd">
            <div class="weui_cells">
              <div v-for="bd in billDetails" class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                  <p>
                    <span style="display: block;text-align: left;">名称：<span style="color: #0ae;">{{bd.feeName}}</span></span>
                    <span style="display: block;text-align: left;">规格：<span style="color: #0ae;">{{bd.spec}}</span></span>
                    <span style="display: block;text-align: left;">数量：<span style="color: #0ae;">{{bd.qty}}</span></span>
                    <span style="display: block;text-align: left;">单位：<span style="color: #0ae;">{{bd.unit}}</span></span>
                    <span style="display: block;text-align: left;">单价：<span style="color: #0ae;">{{bd.price}} 元</span></span>
                    <span style="display: block;text-align: left;">小计：<span style="color: #0ae;">{{bd.amt}} 元</span></span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui_dialog_ft">
        <a href="javascript:;" class="weui_btn_dialog primary" @click="hideBillDetail">关闭</a>
      </div>
    </div>
  </div>
</template>
<style scoped>
.scroll-wrapper {
  position: relative;
  top: -10px;
  left: 0;
  width: 100%;
  height: 75%;
  bottom: 0;
  overflow: hidden;
}

.scroller {
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}

.ft-sm p {
  padding: 3px;
  font-size: 12px;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script>
import {
  setDefaultBillCard,
  clearBillCard,
  showCommonToast
} from '../../vuex/actions'
import _ from 'underscore'
import $ from 'jquery'
import { iScroll as IScroll } from '../../assets/lib/iscroll4/iscroll'

export default {
  name: 'GetBillView',
  data: function () {
    return {
      bills: [],
      billDetails: [],
      isShowBillDetail: false,
      showEmpty: false,
      emptyMsg: '找不到待缴费的缴费单'
    }
  },
  vuex: {
    getters: {
      order: ({ billOrder }) => billOrder
    },
    actions: {
      setDefaultBillCard,
      clearBillCard,
      showCommonToast
    }
  },
  methods: {
    selectCard: function () {
      this.$router.go({ name: 'selectCard' })
    },
    dialogScroll: function () {
      // this.$event.preventDefault()
      this.$event.stopPropagation()
      return true
    },
    showBillDetail: function (idx) {
      var bill = this.bills[idx]
      var self = this
      this.$ajax.get('GetClinRecipeDetail', 'Bill', { recipeId: bill.recipeId }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showCommonToast({ msg: data.ResultMsg })
          return
        }

        self.billDetails = _.map(data.ClinRecipeDetailInfos, function (val) {
          return {
            feeName: val.FeeName,
            spec: val.Spec,
            qty: val.Qty,
            unit: val.Unit,
            price: val.Price,
            amt: val.Amt
          }
        })

        if (self.billDetails.length === 0) {
          self.showCommonToast({ msg: '找不到处方明细信息' })
          self.billDetails = []
        }
        self.$nextTick(function () {
          self.dialogScroll.refresh()
          self.dialogScroll.scrollTo(0, 0, 0)
        })
        self.isShowBillDetail = true
      })
    },
    hideBillDetail: function () {
      this.billDetails = []
      this.isShowBillDetail = false
      // this.dialogScroll.destroy()
      // this.dialogScroll = null
    },
    getBills: function () {
      var self = this
      this.$ajax.get('GetBillList', 'Bill', { cardId: this.order.cardId }).then(function (data) {
        if (data.ResultCode === '0') {
          if (data.Bills.length === 0) {
            self.showEmpty = true
            self.emptyMsg = '找不到待缴费的缴费单'
            self.bills = []
          } else {
            self.bills = _.map(data.Bills, function (val) {
              return {
                recipeId: val.RecipeId,
                flowNo: val.FlowNo,
                cureDate: val.CureDate,
                deptName: val.DeptName,
                docName: val.DocName,
                payType: val.PayType,
                recipeType: val.RecipeType,
                totalAmt: val.TotalAmt
              }
            })
          }
        } else {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
          self.bills = []
        }
      })
    },
    goBill: function () {
      var checkedCount = $('input[name="ckbClinRecipt"]:checked').length
      if (checkedCount === 0) {
        this.showCommonToast({ msg: '请勾选需缴费的处方单' })
        return
      }

      var selectedRecipeIds = ''
      $('input[name="ckbClinRecipt"]:checked').each(function () {
        selectedRecipeIds += $(this).val() + ','
      })
      selectedRecipeIds = selectedRecipeIds.substr(0, selectedRecipeIds.length - 1)
      this.$router.go({ name: 'doBill', query: { selectedRecipeIds: selectedRecipeIds } })
    }
  },
  ready: function () {
    if (this.order.cardId === -1) {
      this.setDefaultBillCard()
    }

    if (this.order.cardId !== -1) {
      this.getBills()
    }

    this.$watch('order.cardId', function (val) {
      if (val !== -1) {
        this.getBills()
      }
    })
    this.dialogScroll = new IScroll('scroll-wrapper', { hScroll: false, vScroll: true, hScrollbar: false, vScrollbar: false })
    $('input[name="ckbClinRecipt"]').each(function () {
      $(this).click(function () {
        var allCount = $('input[name="ckbClinRecipt"]').length
        var checkedCount = $('input[name="ckbClinRecipt"]:checked').length
        if (checkedCount === 0) {
          if ($('#ckbSelectALL').is(':checked')) {
            $('#ckbSelectALL').click()
          }
        } else if (allCount === checkedCount) {
          if ($('#ckbSelectALL').is(':checked') === false) {
            $('#ckbSelectALL').click()
          }
        }
      })
    })

    $('#ckbSelectALL').click(function () {
      $('input[name="ckbClinRecipt"]').each(function () {
        $(this).click()
      })
      if ($('#ckbSelectALL').is(':checked')) {
        $('input[name="ckbClinRecipt"]').each(function () {
          if ($(this).is(':checked') === false) {
            $(this).click()
          }
        })
      } else {
        $('input[name="ckbClinRecipt"]').each(function () {
          if ($(this).is(':checked')) {
            $(this).click()
          }
        })
      }
    })
    this.$nextTick(function () {
      this.dialogScroll.refresh()
      this.dialogScroll.scrollTo(0, 0, 0)
    })
  },
  route: {
    deactivate: function (transition) {
      if (transition.to.name !== 'selectCard' && transition.to.name !== 'doBill') {
        this.clearBillCard()
      }
      transition.next()
    }
  },
  dialogScroll: null
}
</script>
